<template>
	<view class="app-container">
		<view class="tab-list flex">
			<view v-for="item in tabList" :key="item.id" class="tab-item" :class="{ active: activeTab === item.id }"
				hover-class="is-hover" @click="handleClickTab(item)">{{ item.name }}</view>
		</view>
		<z-paging v-show="activeTab === 1" ref="paging1" class="activity-list flex-1" :fixed="false"
			v-model="activityList" @query="getActivityList">
			<ActivityItem v-for="item in activityList" :key="item.id" :data="item" class="activity-item-box" />
		</z-paging>
		<z-paging v-show="activeTab === 2" ref="paging2" class="activity-list flex-1" :fixed="false"
			v-model="noticeList" @query="getNoticeList">
			<ListItem v-for="item in noticeList" :key="item.id" :type="3" :data="item" class="list-item-box" />
		</z-paging>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs
	} from "vue";
	import {
		listActivity,
		listNotice,
		getPlayAppId
	} from "@/api";
	import store from "@/store";
	import { showNotLoginModal } from "@/utils";
	import {
		onShow
	} from '@dcloudio/uni-app';

	const state = reactive({
		activeTab: 1,
		queryParams: {
			page: 1,
			limit: 10
		},
		activityList: [],
		noticeList: [],
		tabList: [{
				id: 1,
				name: "赛事活动"
			},
			{
				id: 2,
				name: "维护通知"
			},
			{
				id: 3,
				name: "任务中心"
			},
			{
				id: 4,
				name: "找陪玩"
			},
		]
	});

	const {
		activeTab,
		queryParams,
		activityList,
		noticeList,
		tabList
	} = toRefs(state);

	const paging1 = ref(null);
	const paging2 = ref(null);
	
	onShow(() => {
		const tabId = uni.getStorageSync("activeTab") || 1
		activeTab.value = tabId
		uni.removeStorageSync("activeTab")
	})

	// 获取活动列表
	async function getActivityList(pageNum, pageSize) {
		queryParams.value.page = pageNum;
		queryParams.value.limit = pageSize;
		const res = await listActivity(queryParams.value)
		paging1.value.complete(res.data.data);
	}

	// 获取赛事通知列表
	async function getNoticeList(pageNum, pageSize) {
		queryParams.value.page = pageNum;
		queryParams.value.limit = pageSize;
		const res = await listNotice(queryParams.value)
		paging2.value.complete(res.data.data);
	}

	// 点击切换tab
	async function handleClickTab(tab) {
		if (tab.id === 3) {
			await store.dispatch("GetUserInfo");
			if(!store.state.isLogin) return showNotLoginModal();
			uni.navigateTo({
				url: "/pages/task/index"
			})
			return;
		}
		if (tab.id === 4) {
			// 获取陪玩小程序AppId
			const res = await getPlayAppId();
			uni.openEmbeddedMiniProgram({
				appId: res.data.appid,
				path: res.data.page,
				fail: (error) => {
					if(error.errMsg.indexOf("invalid appid") !== -1) {
						uni.showToast({
							title: "无效的AppId",
							icon: "none"
						})
					}
				}
			})
			return;
		}
		activeTab.value = tab.id;
	}
</script>

<style scoped lang="scss">
	.app-container {
		.tab-list {
			column-gap: 20rpx;
			padding: 30rpx;

			.tab-item {
				padding: 0 30rpx;
				font-size: 26rpx;
				background-color: #FFFFFF;
				color: var(--default-font-color);
				border-radius: 30rpx;
				line-height: 60rpx;

				&.active {
					background-color: var(--primary-color);
					color: #FFFFFF;
				}
			}
		}

		.activity-list {
			overflow-y: auto;
			padding: 0 20rpx;

			::v-deep .activity-item-box:last-of-type {
				.activity-item {
					margin-bottom: 0;
				}
			}

			::v-deep .list-item-box:last-of-type {
				.list-item {
					margin-bottom: 0;
				}
			}
		}
	}
</style>